<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电瓶车商城管理界面</title>
    <!--加载layui的css样式-->
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-table-cell {
            height: 80px;
            line-height: 80px;

        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <!--搜索菜单栏-->
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <!--搜索条件-->

                <div class="layui-inline">
                    <label class="layui-form-label">电车型号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="goodsname" id="goodsname" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <!--搜索按钮-->
                <div class="layui-inline">
                    <button id="electromobile-searchbtn" class="layui-btn layuiadmin-btn-admin" lay-submit
                            lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
            <!--添加新的电瓶车商品信息-->
            <div class="layui-button">
                <button id="addelectromobile" class="layui-btn layui-btn-nomal">
                    <i class="layui-icon  layuiadmin-button-btn">新增电车</i>
                </button>
            </div>
        </div>
        <!--查询出的所有电车商品信息栏-->
        <div class="layui-card-body">
            <table class="layui-hide" id="electromobile" lay-filter="electromobile-filter"></table>
            <!--前缀编号-->
            <script type="text/html" id="addList">
                {{d.LAY_TABLE_INDEX+1}}
            </script>
            <!--layui的js包-->
            <script src="/aaa/layuiadmin/layui/layui.js"></script>
            <!--操作按键-->
            <script type="text/html" id="electromobile-bar">
                <a class="layui-btn  layui-btn-xs" lay-event="electromobile-del">删除</a>
            </script>
        </div>
    </div>
</div>


<!--------------------------------------弹出添加新电瓶车商品栏---------------------------------------------------------------------------------------------------------------------->

<div class="x-body" style="display:none;" id="electromobile-layer" width="50px">
    <!--form表单展示过户的详情-->
    <form class="layui-form" id="addform" lay-filter="detailmessage">
        <div class="layui-form-item">
            <label class="layui-form-label">电车型号：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname" id="electromobile-goodsname" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格：</label>
            <div class="layui-input-inline">
                <input type="text" name="goodscost" id="electromobile-goodscost" required lay-verify="required"
                       placeholder="" autocomplete="off" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品照片：</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <h6 style="color: red;font-size: 8px">该过程可能较缓慢,请耐心等待</h6>
                <img  id="goodsphotourl1"  src="" style="width: 100px;height: 80px;"/>
                <input  name="goodsphotourl" id="goodsphotourl" type="hidden"  >
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">详细介绍：</label>
            <div class="layui-input-inline">
                    <textarea  value="123" class="layui-textarea" name="goodsdesc" id="electromobile-goodsdesc"></textarea>
            </div>
        </div>


        <!--保存认证的信息-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="electromobile-layer">确认添加</button>
            </div>
        </div>

    </form>
</div>
<div id="" style="display: none">


</div>
</div>
<!--自定义模板填入图片地址-->
<script type="text/html" id="showimg">
    <img src="{{ d.goodsphotourl}}"/>
</script>

<script th:inline="none">
    layui.use(['table', 'laytpl', 'form','upload'], function () {
        var table = layui.table;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.$;
        table.render({
            //连接搜索栏
            elem: '#electromobile',
            height: 600,
            //跳转的地址信息
            url: '/aaa/ElectromobileController/GetElectromobileMessage',
            //分页功能
            page: true,
            //列表中所查询的信息
            cols: [
                [
                    {field: 'add', title: '编号', align: 'center', templet: '#addList', width: 50},
                    {field: 'goodsname', title: '电车型号', align: 'center'},
                    {field: 'goodscost', title: '价格', align: 'center'},
                    {
                        field: 'goodsphotourl', width: 150,
                        unresize: true, align: 'center', title: '照片',
                        //templet:'<div><img src="{{d.electromobilephotoUrl}}"></div>'
                        templet: '#showimg'
                    },  //自定义显示图片方法
                    {field: 'goodsdesc', title: '介绍', align: 'center'},
                    {field: 'createtime', title: '上架时间', align: 'center'},
                    {title: '操作', toolbar: '#electromobile-bar', align: 'center'},
                ]
            ],
            //显示大图-----------------------------------------------------------------------------------------------
            done: function (res, curr, count) {
                hoverOpenImg();//显示大图
                $('table tr').on('click', function () {
                    $('table tr').css('background', '');
                    $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }

        });

        //显示大图-----------------------------------------------------------------------------------------------
        function hoverOpenImg() {
            var img_show = null; // tips提示
            $('td img').hover(function () {
                var kd = $(this).width();
                kd1 = kd * 3;          //图片放大倍数
                kd2 = kd * 3 + 30;       //图片放大倍数
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: [kd2 + 'px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:70px;display:block!important');
        }

        //搜索框点击事件-----------------------------------------------------------------------------------------------
        $('#electromobile-searchbtn').click(function () {
            table.reload('electromobile', {
                url: '/aaa/ElectromobileController/GetElectromobileMessage',
                where: {
                    goodsname: $("#goodsname").val(),
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        })




        //所有表格中按钮点击事件-----------------------------------------------------------------------------------------------
        //监控数据表格
        table.on('tool(electromobile-filter)', function (obj) {
            var data = obj.data;
            //详情按钮触发的事件----------------------------------------
            //查询对应的二手车认证信息表单内容----------------------------------------------
            if (obj.event === 'electromobile-del') {
                //删除已经电瓶车商品--------------------------------------------------------------
                layer.confirm('确定要删除型号为"  '+data.goodsname+'"  的车辆信息吗？', function(index) {
                    $.post("/aaa/ElectromobileController/DelGoods", {
                        "goodsname":data.goodsname,
                    }, function(res) {
                        if (res.code == 100) {
                            layer.msg('已经删除该商品',{icon:1,time:1000});
                            location.reload();
                        }

                    });
                });
            }
        });


        //执行上传照片
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/aaa/ElectromobileController/uploadPhoto' //上传接口
            ,accept: 'file'
            ,done: function(res){
                if(res.code==0){
                    $("#goodsphotourl1").attr('src',res.data);
                    $("#goodsphotourl").attr('value',res.data);
                    layer.msg('图片上传成功',{icon:1,time:1000});
                }else{
                    layer.msg('图片上传失败,请重试',{icon:1,time:1000});
                }

            }
            ,error: function(){
                //请求异常回调
            }
        });

        //添加新电车商品确认按钮
        //form表单监控，监控提交按钮
        //将表单中新电瓶车商品信息添加入商品信息表
        form.on('submit(electromobile-layer)', function (data) {
            var param = data.field;//定义临时变量获取表单提交过来的数据，非json格式
            console.log(param);
            $.ajax({
                url: "/aaa/ElectromobileController/addNewCar",
                method: 'post',//method请求方式，get或者post
                dataType: 'json',//预期服务器返回的数据类型
                data: param,//表格数据序列化
                success: function (res) {//res为相应体,function为回数
                    if (res.code==100){
                        layer.closeAll();
                        layer.msg('已提交新商品',{icon:1,time:3000});
                        location.reload();
                    } else{
                        layer.msg('失败商品已经存在',{icon:1,time:3000});
                    }
                }
            });
            return false;
        });
        //添加新电瓶车商品栏按钮
        $(document).on('click','#addelectromobile',function(){
            layer.msg('hello');
            electromobilelayer = layer.open({
                type: 1,
                title: '添加新车',
                shade: [0.3, '#393D49'],
                maxmin: false,
                shadeClose: false,
                area: ['893px', '550px'],
                //打开的弹出层
                content: $('#electromobile-layer')
            });
        });

    });
</script>
</body>
</html>